<template>
	<view class="theme-settings">
		<u-popup v-model="showPopup" mode="center" borderRadius="16" width="80%" height="300">
			<view class="theme-settings__content">
				<view class="theme-settings__title">主题设置</view>
				
				<view class="theme-settings__item">
					<text class="theme-settings__item-label">暗黑模式</text>
					<theme-switcher></theme-switcher>
				</view>
				
				<view class="theme-settings__footer">
					<u-button type="primary" text="确定" @click="closePopup"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 * @description 主题设置弹窗组件
 * @author TickTock团队
 */
import ThemeSwitcher from './ThemeSwitcher.vue';

export default {
	name: 'ThemeSettings',
	components: {
		ThemeSwitcher
	},
	data() {
		return {
			showPopup: false
		};
	},
	methods: {
		open() {
			this.showPopup = true;
		},
		closePopup() {
			this.showPopup = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.theme-settings {
	&__content {
		padding: 30rpx;
	}
	
	&__title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	&__item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 10rpx 0;
	}
	
	&__item-label {
		font-size: 28rpx;
	}
	
	&__footer {
		margin-top: 40rpx;
	}
}
</style> 